{% load i18n %}
{% load l10n %}

{% with choices.0 as choice %}
    <div class="admin-numeric-filter-wrapper mb-6">
        <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">
            {% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}
        </h3>

        {% if choice.min is not None and choice.max is not None and choice.step %}
            <div class="admin-numeric-filter-slider-tooltips">
                <span class="admin-numeric-filter-slider-tooltip-from border cursor-not-allowed flex flex-grow flex-row items-center mr-auto rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
                    {{ choice.value_from }}
                </span>

                <span class="admin-numeric-filter-slider-tooltip-to border cursor-not-allowed flex flex-grow flex-row items-center rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
                    {{ choice.value_to }}
                </span>
            </div>

            <div class="admin-numeric-filter-slider" data-min="{{ choice.min|unlocalize }}" data-max="{{ choice.max|unlocalize }}" data-decimals="{{ choice.decimals }}" data-step="{{ choice.step|unlocalize }}">
            </div>

            <div class="admin-numeric-filter-wrapper-group hidden">
                {{ choice.form.as_p }}
            </div>
        {% else %}
            <div class="admin-numeric-filter-slider-error dark:text-font-default-dark">
                <p>
                    {% trans 'Not enough data.' %}
                </p>
            </div>
        {% endif %}
    </div>
{% endwith %}
